<template>
  <div>
    <scroll-view
      :scroll-left="scrollleft"
      id="fixd"
      :class="fixtop? 'fix':''"
      scroll-x="true"
      style="width: 100%;white-space:nowrap;background-color:#fff;  box-sizing: border-box;"
    >
      <div class="nav">
        <div
          :id="'navitem' +index"
          @click="tabClick(index)"
          v-for="(item,index) in nav"
          :key="index"
          class="nav_item"
          :class="activeIndex == index? 'active':''"
        >{{item}}</div>
      </div>
    </scroll-view>
    <swiper
      :style="'height:'+swiperHeight+'px'"
      class="swiper"
      duration="200"
      :current="activeIndex"
      @change="swiperChange"
    >
      <block
        v-for="(swi,s) in nav"
        :key="s"
      >
        <swiper-item>
          <div class="content">
            {{swi}}
            <block
              v-for="(temp,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"
              :key="i"
            >
              <view class="item-ans">
                <view class="avatar">
                  <image
                    class="img"
                    src="http://oss.youmbe.com/attachments/avatar/29.jpg"
                  />
                </view>
                <view class="expertInfo">
                  <view class="name">欢颜{{item}}-{{temp}}</view>
                  <view class="tag">知名情感博主</view>
                  <view class="answerHistory">134个回答，2234人听过 </view>
                </view>
                <navigator
                  url="/pages/askExpert/expertDetail"
                  class="askBtn"
                >问TA</navigator>
              </view>
            </block>
          </div>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>


<script>
export default {
  data () {
    return {
      nav: [
        '选项卡一',
        '选项卡二',
        '选项卡三',
        '选项卡四',
        '选项卡五',
        '选项卡六',
        '选项卡七',
        '选项卡八'
      ],
      fixtop: true, // 是否吸顶
      top: 0, // 导航栏初始到屏幕顶部高度
      activeIndex: 0, // 选项卡及swiper位置
      scrollleft: 0, // scroll-view 横向滚动条位置
      windowWidth: 0, // 窗口宽度
      swiperHeight: 2000 // 此处为swiper高度
    }
  },
  methods: {
    tabClick (e) {
      this.activeIndex = e
    },
    swiperChange (e) {
      this.activeIndex = e.mp.detail.current
      let that = this
      const query = wx.createSelectorQuery()
      query.select('#navitem' + this.activeIndex).boundingClientRect()
      query.exec(function (res) {
        console.log(res)
        if (res[0].right > that.windowWidth) {
          that.scrollleft = res[0].right
        } else if (res[0].left < 0) {
          that.scrollleft = res[0].left
        }
      })
    }
  },

  onLoad () {
    let that = this
    let res = wx.getSystemInfoSync()
    that.windowWidth = res.windowWidth
    const query = wx.createSelectorQuery()
    query.select('#fixd', '.nav').boundingClientRect()
    query.exec(function (res) {
      that.top = res[0].top
    })
  },
  onPageScroll: function (e) {
    var that = this
    console.log(that.top)
    if (e.scrollTop >= that.top) {
      that.fixtop = true
    } else {
      that.fixtop = false
    }
  }
}
</script>


<style lang="less">
.box {
  height: 200px;
  width: 100%;
  background-color: #f5f5f5;
}
.nav {
  width: 100%;
  display: flex;
  height: 50px;
  background-color: #fff;
  box-sizing: border-box;
  .nav_item {
    flex: auto;
    text-align: center;
    line-height: 50px;
    padding: 0 20px;
  }
  .active {
    color: red;
  }
}
.content {
  background-color: #f1f1f1;
  height: 2000px;
}
.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  animation: move 0.2s linear;
}
@keyframes move {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

.item-ans {
  width: 100%;
  display: flex;
  flex-grow: row no-wrap;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  height: 180rpx;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  padding-right: 30rpx;
}
.avatar .img {
  width: 100%;
  height: 100%;
}
.avatar .doyen {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  bottom: -2px;
  right: 20rpx;
}
.expertInfo {
  font-size: 12px;
  flex-grow: 2;
  color: #b0b0b0;
  line-height: 1.5em;
}
.expertInfo .name {
  font-size: 16px;
  color: #000;
  margin-bottom: 6px;
}
.askBtn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 14px;
  border-radius: 60rpx;
  border: 1px solid #4675f9;
  color: #4675f9;
}
</style>